<template>
  <div :class="['novel-read-page', nightMode ? 'night' : '']">
    <!-- 固定顶部导航栏 -->
    <div class="header">
      <div class="logo" @click="Fanhui()">
        <img src="../assets/image/fanhui.png" alt="">
        {{bookTilte.comment[0].title}} - <span>{{bookTilte.chapter}}</span>
      </div> <!-- 网站logo -->
      <div class="user-bar">
        <span class="user-name" @click="Gren()">{{$store.state.dlBoole==''?'未登录':$store.state.dlBoole.bookfrd}}</span> <!-- 用户名 -->
      </div>
    </div>
   
    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 小说信息卡片 -->
      <!-- <div class="book-card">
        <img class="book-cover" :src="book.cover" alt="封面" /> 
        <div class="book-title">{{ book.title }}</div>
        <div class="book-author">{{ book.author }} 著</div>
        <div class="book-meta-row">
          <div class="book-meta">
            <div class="meta-label">类型</div>
            <div class="meta-value">{{ book.category }}</div>
          </div>
          <div class="book-meta">
            <div class="meta-label">上架</div>
            <div class="meta-value">{{ book.publishDate }}</div>
          </div>
          <div class="book-meta">
            <div class="meta-label">连载中(字)</div>
            <div class="meta-value">{{ book.words }}</div>
          </div>
        </div>
        <div class="book-desc">
          与 {{ book.readers }} 位书友共同开启《{{ book.title }}》的奇幻之旅
        </div>
        <div class="book-tags">
          <span class="tag" v-for="(tag, idx) in book.tags" :key="idx">{{ tag }}</span>
        </div>
        <div class="book-copyright">
          <i class="iconfont copyright-icon">&#xe60f;</i> 阅文集团<br>
          <span class="copyright-tip">本作品由起点中文网独家电子制作与发行</span><br>
          <span class="copyright-tip">©版权所有 侵权必究</span>
        </div>
      </div> -->
      <!-- 小说正文内容 -->
      <div class="novel-content">
        <img :src="Imgcontent" alt="">
        <p v-html="content"></p>
      </div>
      <div class="Click_zhangjie">
        <div class="zj_bt" @click="to_top">上一章</div>
        <div class="zj_bt" @click="to_bottom">下一章</div>
      </div>
      <!-- 右侧悬浮栏 -->
      <div class="side-bar">
        <div class="side-btn" @click="showCatalog = true">
          <img src="../assets/image/D6.png" alt="">
          <div>目录</div>
        </div>
        <div class="side-btn" @click="Fanhui">
          <img src="../assets/image/D5.png" alt="">
          <div>书详情</div>
        </div>
        <div class="side-btn" @click="to_bookshelf()">
          <img src="../assets/image/D4.png" alt="">
          <div>收藏</div>
        </div>
        <a href="#" rel="internal" class="side-btn" @click="handleClick">
          <img src="../assets/image/D1.png" alt="">
          <div>顶部</div>
        </a>
      </div>
      <!-- 目录弹窗 -->
      <transition name="slide-up">
        <div class="catalog-modal" v-if="showCatalog" @click.self="showCatalog = false">
          <div class="catalog-panel">
            <div class="catalog-header">
              <span>目录</span>
              <i class="iconfont close-btn" @click="showCatalog = false">X
              </i>
            </div>
            <div class="catalog-list">
              <div class="catalog-item" v-for="(chapter, idx) in catalog" :key="idx" @click="ZhangTan(chapter)">
               第{{idx+1}}章 &nbsp;{{ chapter.chapter }}
               <img v-show="chapter.isnovip==1" style="width: 13px; height: 15px; margin-left: 5px;" src="../assets/image/mima.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </transition>

      <!-- vip 遮罩层 -->
      <div class="zhezhao_ce" v-show="VIPisn==1">
        <h2>这是vip章节 需要开通vip后才能继续阅读</h2>
        <p class="jiezhi_p">
          <router-link to="/yhxy">请阅读《用户协议》</router-link>
          <router-link to="/yhxy">《隐私政策》</router-link>和
          <router-link to="/hyxy">《VIP会员服务协议》</router-link>
        </p>
        <div class="fangkuai_p" @click="$router.push('/Recharge')">开通会员</div>
        <div class="fangkuai_p_p" @click="Fanhui()">再逛逛~</div>
        <!-- style="background-color: #ccc; color: #494949;" -->
      </div>
    </div>

    
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'NovelReadPage',
  data() {
    return {
      content: [],//小说文字内容
      bookTilte:[],//小说标题以及信息
      Imgcontent:'',//图片展示
      catalog: [],
      showCatalog: false, // 目录弹窗显示
      nightMode: false, // 夜间模式
      bookId: 0, // 小说书本ID
      chapterId:0,//章节ID
      VIPisn:0,//0不是 1是
    }
  },
  mounted(){
    window.addEventListener('click', this.handleClick);
    this.bookId = this.$route.params.bookId;
    this.chapterId = this.$route.params.chapterId;
    this.ajaxQJ(this.bookId,this.chapterId);
      axios.post('/api/index/detail',{ novelid:this.bookId })
        .then(response => {
          this.catalog = response.data.detail[0];
          // console.log(this.catalog);
        })
        .catch(error => {
          console.error('Error fetching book details:', error);
        });
  },
  beforeDestroy() {
    window.removeEventListener('click', this.handleClick);
  },  
  methods: {
    //请求小说
    ajaxQJ(bookId,chapterId){
      const data = {
        novelid:bookId, // 小说ID
        zhangjielid:chapterId, // 章节ID
        
      }
      axios.post('api/index/bookdetail',data)
      .then(res=>{
        console.log(res);
        this.bookTilte = res.data.detail.list[0]; // 小说标题及信息
        this.content = res.data.detail.list[0].content; // 小说内容
        this.VIPisn = res.data.detail.list[0].isnovip;// 小说vip章节
        if(this.$store.state.dlBoole!==''){
          if(this.$store.state.dlBoole.isnovip==1){
            this.VIPisn == 0;//关掉遮罩层
          }
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    //跳转到个人页面
    Gren() {
      if (this.$store.state.dlBoole !=='') {
        this.$router.push('/person'); // 跳转到个人页面
      } else {
        this.$router.push('/');
      }
    },
    // 夜间模式切换
    toggleNight() {
      this.nightMode = !this.nightMode;
    },
    //返回
    Fanhui(){
      this.$router.push(`/bookDetails/${this.bookId}`);//返回上一个
    },
    //加入收藏
    to_bookshelf(){
      if(this.$store.state.dlBoole!==''){
        axios.post('/api/index/shujia',{
          phone:this.$store.state.dlBoole.phone,//用户手机号
          novelid:this.bookId,//shu本id
        })
        .then(response => {
          console.log(response.data);
          if(response.data.code == 1){
            this.$message({
              message: '已添加到收藏',
              type: 'success',
              duration:1000
            });
          }else{
            this.$message({
              message: `添加失败，${response.data.msg}`,
              type: 'warning',
              duration:1000
            });
          }
        })
      }else{
        this.$message({
          message: '请先登录',
          type: 'warning',
          duration:1000
        });
      }
    },
    //返回顶部
     handleClick(event) {
      if (event.target === document.body || event.target.tagName === 'BODY') {
        this.$message.success('已返回顶部');
        window.scrollTo(0, 0);
        
      }
    },
    //下一章 按钮
    to_bottom(){
      this.chapterId = Number(this.chapterId)+1;  // 假设每次点击下一章ID加1
      console.log(this.chapterId,this.catalog[this.catalog.length - 1].id);
      if(this.chapterId >= this.catalog[this.catalog.length - 1].id) {
        this.chapterId = this.catalog.length - 1; // 防止超出范围
        this.$message.warning('已经是最后一章了');
      }else{
        this.ajaxQJ(this.bookId,this.chapterId);
        window.scrollTo(0, 0);
      }
    },
    //上一章 按钮
    to_top(){
        this.chapterId = Number(this.chapterId)>1?Number(this.chapterId)-1:1;  // 假设每次点击下一章ID加1
        console.log(this.chapterId,this.catalog[0].id);
        if(this.chapterId < this.catalog[0].id) {
          this.chapterId = 1; // 防止超出范围
          this.$message.warning('已经是第一章');
        }else{
          this.ajaxQJ(this.bookId,this.chapterId);
          window.scrollTo(0, 0);
        }
    },
    // 目录弹窗点击事件
    ZhangTan(chapter) {
      console.log(chapter.id);
      this.chapterId = chapter.id; // 更新章节ID
      this.ajaxQJ(this.bookId,this.chapterId);
      this.showCatalog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.novel-read-page {
  background: #ece9df url('@/assets/image/wenli.png') repeat; // 背景纹理
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 夜间模式样式
  &.night {
    background: #23232b;
    color: #eaeaea;
    .book-card, .novel-content {
      width: 10%;
      background: #23232b;
      color: #eaeaea;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
    }
    .side-bar, .left-menu {
      background: transparent;
    }
    .book-title, .book-author, .book-meta, .meta-label, .meta-value, .book-desc, .book-tags, .copyright-tip, .novel-content p {
      color: #eaeaea;
    }
    .catalog-panel {
      background: #23232b;
      color: #eaeaea;
    }
    .catalog-item {
      color: #eaeaea;
    }
  }
  // 固定顶部导航栏
  .header {
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    width: 900px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f6ef;
    .logo {
      img{
        width: 25px;
        margin-right: 5px;
      }
      font-size: 20px;
      font-weight: bold;
      color: #222;
      letter-spacing: 2px;
      margin-left: 30px;
      display: flex;
      align-items: center;
      cursor: pointer;
      span{
        font-size: 18px;
        color: #606060;
        margin-left: 10px;
      }
    }
    .user-bar {
      display: flex;
      align-items: center;
      margin-right: 30px;
      .user-name {
        font-size: 15px;
        color: #888;
        margin-right: 6px;
        cursor: pointer;
      }
      .user-arrow {
        font-size: 14px;
        color: #bbb;
      }
    }
  }
  // 主体内容区
  .main-content {
    max-width: 900px; // 最大宽度1000px
    margin: 3% auto;
    position: relative;
    box-sizing: border-box;
    padding-top: 12px;
    // 小说信息卡片
    .book-card {
      background: #ffffff47;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
      padding: 48px 0 32px 0;
      margin-bottom: 32px;
      text-align: center;
      border: 1px solid #eae6d8;
      .book-cover {
        width: 150px;
        border-radius: 8px;
        margin-bottom: 18px;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      }
      .book-title {
        font-size: 34px;
        font-weight: bold;
        margin-bottom: 8px;
        color: #222;
        letter-spacing: 2px;
      }
      .book-author {
        font-size: 16px;
        color: #888;
        margin-bottom: 18px;
      }
      .book-meta-row {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin-bottom: 18px;
        .book-meta {
          .meta-label {
            font-size: 14px;
            color: #888;
            margin-bottom: 2px;
          }
          .meta-value {
            font-size: 16px;
            color: #222;
            font-weight: bold;
          }
        }
      }
      .book-desc {
        font-size: 16px;
        color: #444;
        margin-bottom: 10px;
      }
      .book-tags {
        margin-bottom: 18px;
        .tag {
          display: inline-block;
          background: #f3f3f3;
          color: #888;
          border-radius: 4px;
          padding: 4px 12px;
          font-size: 14px;
          margin: 0 6px;
        }
      }
      .book-copyright {
        font-size: 13px;
        color: #bbb;
        margin-top: 18px;
        .copyright-icon {
          font-size: 16px;
          color: #bbb;
          margin-right: 4px;
        }
        .copyright-tip {
          color: #bbb;
          font-size: 12px;
        }
      }
    }
    // 小说正文内容
    .novel-content {
      background: #ffffff3a;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
      padding: 0px 50px 36px 48px;
      margin-bottom: 32px;
      font-size: 18px;
      color: #222;
      line-height: 2.1;
      letter-spacing: 0.04em;
      word-break: break-all;
      min-height: 400px;
      width: 800px;
      img{
        text-align: center;
      }
      p {
        margin: 0 0 18px 0;
        text-indent: 2em;
        font-family: inherit;
        font-size: 18px;
        color: inherit;
        transition: color 0.2s;
      }
    }
    // 章节切换按钮
    .Click_zhangjie{
      padding: 2%;
      background-color: rgba(254, 254, 254, 0.358);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .zj_bt{
        padding: 2% 6%;
        background-color: #ffffffaf;
        border-radius: 50px;
        cursor: pointer;
        color: #505050;
      }
      .zj_bt:hover {
        background-color: #ffffff;
        color: #030303;
      }
    }
    // 右侧悬浮栏
    .side-bar {
      position: fixed;
      right: 20%;
      bottom: 15%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 20;
      .side-btn {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #888;
        cursor: pointer;
        transition: background 0.2s;
        &:hover {
          background: #f3f3f3;
        }
        img{
            width: 23px;
            margin-bottom: 3px;
        }
      }
    }
    // 目录弹窗
    .catalog-modal {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      top: 0;
      background: rgba(0,0,0,0.18);
      z-index: 100;
      display: flex;
      align-items: flex-end;
      .catalog-panel {
        width: 100%;
        height: 100%;
        max-width: 900px;
        margin: 0 auto;
        background: #fffefb;
        box-shadow: 0 -2px 12px 0 rgba(0,0,0,0.08);
        .catalog-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 18px;
          font-weight: bold;
          color: #222;
          padding: 15px 24px 12px 24px;
          border-bottom: 1px solid #f0f0f0;
          .close-btn {
            font-size: 22px;
            color: #888;
            cursor: pointer;
            transition: color 0.2s;
            &:hover { color: #e94f4f; }
          }
        }
        .catalog-list {
        height: 100%;
          overflow-y: auto;
          padding: 12px 24px 0 24px;
          .catalog-item {
            font-size: 15px;
            color: #444;
            padding: 10px 0;
            border-bottom: 1px solid #f3f3f3;
            cursor: pointer;
            transition: color 0.2s;
            &:hover { color: #e94f4f; }
          }
        }
      }
    }
    // 目录弹窗动画
    .slide-up-enter-active, .slide-up-leave-active {
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }
    .slide-up-enter, .slide-up-leave-to {
      transform: translateY(100%);
      opacity: 0;
    }
    .zhezhao_ce{
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #ffffff;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 1%);
      bottom: 0;
      
      h2{
        text-align: center;
        margin-top: 53%;
        font-weight:300;
        font-size: 25px;
        color: #969696;
      }
      .jiezhi_p{
        text-align: center;
        font-size: 13px;
        color: #888;
        margin-top: 25px;
        a{
          color: #888;
        }
      }
      .fangkuai_p{
        cursor: pointer;
        width: 300px;
        height: 60px;
        line-height: 60px;
        background-color: #e44d4d;
        color: #fff;
        border-radius: 50px;
        text-align: center;
        font-size: 18px;
        margin: 0 auto;
        margin-top: 20px;
        transition: 0.3s;
        
      }
      .fangkuai_p:hover{
          background-color: #bc0000;
          transition: 0.3s;
      }
      .fangkuai_p_p{
         cursor: pointer;
        width: 300px;
        height: 60px;
        line-height: 60px;
        background-color: #b6b6b6;
        color: #fff;
        border-radius: 50px;
        text-align: center;
        font-size: 18px;
        margin: 0 auto;
        margin-top: 20px;
        transition: 0.3s;
      }
      .fangkuai_p_p:hover{
          background-color: #7c7c7c;
          transition: 0.3s;
      }
    }
  }
  // 左侧竖排菜单
  .left-menu {
    position: fixed;
    left: 0;
    top: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
    .left-menu-item {
      writing-mode: vertical-rl;
      font-size: 14px;
      color: #bbb;
      padding: 6px 0;
      cursor: pointer;
      transition: color 0.2s;
      &:hover { color: #e94f4f; }
    }
  }
}
</style>
